<!-- Record table Action -->
<!-- Author: Edwin -->
<template>
  <div class="action-style">
    <!-- <div class="custom-icon"
         :style="{ backgroundColor: $data.data.action === 'in' ? '#4CAF50' : '#9E9E9E' }"></div> -->
    <div class="custom-icon" v-if="$data.data.action === 'in'"
          style="background:#67C23A"></div>
    <div class="custom-icon" v-else-if="$data.data.action === 'back'"
          style="background:#909399"></div>
    <div class="custom-icon" v-else-if="$data.data.action === 'out'"
          style="background:#F56C6C"></div>
    <div class="custom-icon" v-else-if="$data.data.action === 'break'"
          style="background:#138DC7"></div>
    <div class="custom-icon" v-else-if="$data.data.action === 'lunch'"
          style="background:#138DC7"></div>
    <div class="custom-icon" v-else-if="$data.data.action === 'wfh'"
         style="background:#003FD6"></div>
    <div>
      <div>{{ $data.data.action }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.action-style{
  display: flex;
  align-items: center;

  .custom-icon{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 6px;
  }
}

</style>
